<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>年度收入报表</title>
  <!-- 引入 Vue 和 Element UI -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .annual-report {
      max-width: 1200px;
      margin: 0 auto;
    }
    .summary-card {
      background-color: #f5f7fa;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .summary-title {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }
    .summary-value {
      font-size: 24px;
      font-weight: bold;
    }
    .year-selector {
      margin-bottom: 20px;
    }
    .data-table {
      margin-top: 20px;
    }
	.el-table .cell{
		text-align: center;
	}
  </style>
</head>
<body>
  <div id="app">
    <div class="annual-report">
      <h1>年度收入报表</h1>
      
      <!-- 年份选择器 -->
      <div class="year-selector">
        <el-select v-model="selectedYear" placeholder="选择年份" @change="fetchAnnualData">
          <el-option
            v-for="year in availableYears"
            :key="year"
            :label="year + '年'"
            :value="year">
          </el-option>
        </el-select>
      </div>
      
      <!-- 年度汇总 -->
      <div class="summary-card">
        <div class="summary-title">{{ selectedYear }}年总收入</div>
        <div class="summary-value">¥{{ formatNumber(annualSummary.totalIncome) }}</div>
      </div>
      
      <!-- 月度数据表格 -->
      <el-table 
        class="data-table"
        :data="filteredMonthlyData"
        border
        style="width: 100%">
        <el-table-column
          prop="month"
          label="月份"
          width="100">
        </el-table-column>
        <el-table-column
          prop="totalIncome"
          label="总收入"
          width="180">
          <template slot-scope="scope">
            ¥{{ formatNumber(scope.row.totalIncome) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="renewIncome"
          label="续费收入">
          <template slot-scope="scope">
            ¥{{ formatNumber(scope.row.renewIncome) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="newCardIncome"
          label="新购卡收入">
          <template slot-scope="scope">
            ¥{{ formatNumber(scope.row.newCardIncome) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="newMembers"
          label="新增会员数">
        </el-table-column>
      </el-table>
    </div>
  </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/stadium.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        const currentYear = new Date().getFullYear();
        return {
			id:'',
          selectedYear: currentYear,
          availableYears: [currentYear - 2,currentYear - 1, currentYear],
          annualSummary: {
            totalIncome: 0
          },
          monthlyData: []
        };
      },
      computed: {
        currentMonth() {
          return new Date().getMonth() + 1; // 获取当前月份 (1-12)
        },
        filteredMonthlyData() {
          // 如果是当前年，只显示到当前月份
          const isCurrentYear = this.selectedYear === new Date().getFullYear();
          return isCurrentYear 
            ? this.monthlyData.filter(item => item.month <= this.currentMonth)
            : this.monthlyData;
        }
      },
      created() {
        // 从URL参数获取年份
        const queryParams = new URLSearchParams(window.location.search);
        const year = queryParams.get('year');
        if (year) {
          this.selectedYear = parseInt(year);
        }
        this.fetchAnnualData();
		this.id = requestUrlParam('id');
      },
      methods: {
        fetchAnnualData() {
          setTimeout(() => {
            const isCurrentYear = this.selectedYear === new Date().getFullYear();
            const monthsToGenerate = isCurrentYear ? this.currentMonth : 12;
            // 在这里和后端链接
            // 生成月度数据
            this.monthlyData = Array.from({ length: 12 }, (_, i) => {
              const month = i + 1;
              const hasData = month <= monthsToGenerate;
              // 先用radom模拟数据
              return {
                month: month,
                totalIncome: hasData ? Math.round(Math.random() * 50000 + 20000) : 0,
                renewIncome: hasData ? Math.round(Math.random() * 30000 + 10000) : 0,
                newCardIncome: hasData ? Math.round(Math.random() * 30000 + 5000) : 0,
                newMembers: hasData ? Math.round(Math.random() * 50 + 10) : 0
              };
            });
            
            // 计算年度汇总
            this.annualSummary.totalIncome = this.monthlyData
              .filter(item => item.month <= monthsToGenerate)
              .reduce((sum, item) => sum + item.totalIncome, 0);
          }, 500);
        },
        formatNumber(num) {
          return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    });
  </script>
</body>